#override("morescripts")
<script src="/js/service/user_group.js"></script>
#end

#override("monitorContent")
<div class="col-md-12" >
    <div class="panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">报警用户组列表</h6>
            <div class="heading-elements">
                <ul class="icons-list">
                    <li><a data-action="collapse"></a></li>
                </ul>
            </div>
            <a class="heading-elements-toggle"><i class="icon-menu"></i></a>
        </div>

        <div class="panel-body border-top-primary">

            <div style="padding-bottom: 10px">
                <button type="button" class="btn bg-teal" data-toggle="modal" data-target="#add-user">添加报警用户组</button>
            </div>


            <table id="roleTable" data-toggle="table" data-id-field="id" data-mobile-responsive="true" data-editable-emptytext="Default empty text." data-editable-url="/user/modifyById">

                <thead>
                <tr>
                    <th data-field="id" data-visible="false" data-align="center" data-editable="true">id</th>
                    <th data-align="center" data-editable="false">用户组名</th>
                    <th  data-align="center" data-editable="false">备注</th>
                    <th  data-align="center" data-editable="false">操作</th>
                </tr>
                </thead>

                <tbody>
                #foreach($userGroup in $usergroups)
                <tr>
                    <td class="text-right">$userGroup.id</span></td>
                    <td class="text-right">$userGroup.grpName</span></td>
                    <td class="text-right">$userGroup.note</td>
                    <td>
                        <ul class="icons-list">
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="icon-menu9"></i>
                                </a>

                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li><a  user="$userGroup.id" href="#" class="del"> <i class="icon-bin"></i>删除</a></li>
                                    <li><a  user="$userGroup.id" name="$userGroup.grpName"   note="$userGroup.note"   href="#" class="modify"> <i class="icon-pen"></i>修改</a></li>
                                    <li><a  user="$userGroup.id" href="#" class="bind"> <i class="icon-pen"></i>分配用户组内成员</a></li>
                                </ul>
                            </li>
                        </ul>
                    </td>
                </tr>
                #end
                </tbody>
            </table>
        </div>

    </div>
</div>
</div>

<div id="modify-user" class="modal fade" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h5 class="modal-title">修改报警用户组信息</h5>
            </div>

            <form action="#" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-sm-3">用户组名</label>
                        <div class="col-sm-9">
                            <input type="text" style="display: none" id="id">
                            <input type="text" id="name" placeholder="用户组名" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">备注</label>
                        <div class="col-sm-9">
                            <input type="text" id="note" placeholder="备注" class="form-control">
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">取消</button>
                    <button id="confirmModifyUserGroup" class="btn btn-primary">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="add-user" class="modal fade" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h5 class="modal-title">添加报警用户组信息</h5>
            </div>

            <form action="#" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-sm-3">用户组名</label>
                        <div class="col-sm-9">
                            <input type="text" style="display: none" id="userId">
                            <input type="text" id="add-name" placeholder="用户组名" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-3">备注</label>
                        <div class="col-sm-9">
                            <input type="text" id="add-note" class="form-control" placeholder="备注">
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">取消</button>
                    <button id="confirmAddUserGroup" class="btn btn-primary">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="bind-user" class="modal fade" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h5 class="modal-title">分配用户组成员</h5>
            </div>

            <form action="#" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-sm-3">报警用户</label>
                        <div class="col-lg-9">
                            <input type="text" id="users" placeholder="报警用户">

                        </div>
                    </div>
                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-link" data-dismiss="modal">取消</button>
                    <button id="confirmBindUser" class="btn btn-primary">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>
#end
#extends("/monitor/monitor.html")